<template>
	<view class="team">
		<top-set></top-set>
		<tab-top fixed='true' title="团队业绩统计"></tab-top>
		<view class="box">
			<view class="box_title">
				<image @tap="changeDate(1)" class="left" src="/static/icon/down.png" mode=""></image>
				<view @tap="showchange">{{year}}年{{month}}月</view>
				<image @tap="changeDate(2)" class="right" src="/static/icon/down.png" mode=""></image>
			</view>
			<view class="text">本月累计完成单数</view>
			<view class="num">{{team_static.thismonth_order_count||0}}</view>
			<view class="items">
				<view class="item">
					<view>今日完成单数</view>
					<view>{{team_static.today_order_count||0}}</view>
				</view>
				<view class="item">
					<view>昨日完成单数</view>
					<view>{{team_static.yesetday_order_count||0}}</view>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="title">
				<view class="left">
					<view class="icon"></view>
					<view class="text">个人完成单数</view>
				</view>
				<view class="right">
					<view style="color: #f93735;">(今日)</view>
					<view style="color: #333333;">/合计(单)</view>
				</view>
			</view>
			<view class="item" v-for="(item,index) in items" :key="index">
				<view class="left">
					<view class="name">{{item.cleaner.name}}</view>
					<view class="main">
						<view class="img">
							<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563432494694&di=2dc5957e0ec7812d70bd7bfc3d8694a9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F11%2F20180711132927_QLhNh.thumb.700_0.jpeg"
							 mode=""></image>
						</view>
						<view class="schedule" :style="{width:item.schedule}"></view>
						<view class="_schedule" :style="{width:item._schedule}"></view>
					</view>
				</view>
				<view class="order">
					<view style="color: #f93735;">+{{item.cleaner.today_order_count||0}}</view>
					<view style="color: #333333;">/{{item.cleaner.thismonth_order_count||0}}</view>
				</view>
			</view>
		</view>
		<rangeDatePick 
			:show="show"
			@showchange="showchange"
			start="2018-01"
			:end="end"
			:value="value"
			@change="bindChange"
			@cancel="bindCancel">
		</rangeDatePick>
	</view>
</template>

<script>
	import moment from "moment";
	import rangeDatePick from '@/components/range-dtpicker/range-dtpicker.vue';
	export default {
		components: {
			rangeDatePick
		},
		data() {
			let toDay = new Date(),
			year = moment(toDay).format('YYYY'),
			month = moment(toDay).format('MM'),
			value = [(year+'-'+month)],
			end = year+'-'+month;
			return {
				show: false,
				items: [],
				team_static: {},
				value:value,
				end:end,
				key: '',
				year:year,
				month:month,
				list:[],
				have:'0'
			}
		},
		onLoad() {
			this.teamData();
		},
		methods: {
			teamData() {
				this.getReq({
					url: 'both/cleanTeam',
					data: {
						uid: "D8776811_909B_4445_DE50_8C4E8E7F",
						// uid:this.isLogin().id,
						year:this.year,
						month:this.month
					}
				}).then(data => {
					let [err, res] = data;
					console.log(res)
					if (err || res.data.status == 0 || res.data.data.list.list.length < 1) {
						console.log('获取失败')
					}
					this.items = res.data.data.list.list
					this.team_static = res.data.data.team_static
					/**	模拟数据
						this.items[0].cleaner.thismonth_order_count = 1800
						this.items[1].cleaner.thismonth_order_count = 1640
						this.items[2].cleaner.thismonth_order_count = 1350
						this.items[0].cleaner.today_order_count = 2
						this.items[1].cleaner.today_order_count = 20
						this.items[2].cleaner.today_order_count = 30
					*/
					const maxNum = [];
					this.items.forEach(val => {
						maxNum.push(val.cleaner.thismonth_order_count)
					})
					const max = Math.max(...maxNum);
					this.items.forEach(val => {
						val.schedule = Math.round(val.cleaner.thismonth_order_count * (360 / max)) + 70 + 'rpx'
						val._schedule = Math.round((val.cleaner.thismonth_order_count - val.cleaner.today_order_count) * (360 / max)) +
							70 + 'rpx'
					})
				});
			},
			showchange(){ 
				this.show=!this.show; 
			},
			changeDate(e){
				const toDay = new Date();
				const year = moment(toDay).format('YYYY');
				const month = moment(toDay).format('MM');
				function judge(month){
					if(month<10){
						return '0' + month
					}
					return month
				}
				if(e == 1){  // 向前一个月
					if(this.year == 2019 && this.month == '06'){
						return;
					}else if(this.month == 1){
						this.year --;
						this.month = 12;
					}else{
						this.month = judge(this.month*1-1);
					}	
				}else{  //向后一个月
					if(this.year == year && this.month == month){
						return;
					}else if(this.month == 12){
						this.year ++;
						this.month = 1;
					}else{
						this.month = judge(this.month*1+1);
					}	
				} 
				this.teamData();
			},
			bindChange(e){
				/**
				 * 确认事件
				 */
				console.log(e);
				this.year = e.Y;
				this.month = e.M;
			},
			bindCancel(e){
				/**
				 * 取消
				 */
				console.log(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.team {
		.box {
			color: #fff;
			line-height: 1;
			text-align: center;
			margin: 20rpx 24rpx 24rpx 24rpx;
			width: 702rpx;
			height: 377rpx;
			background-image: url('http://oss.sxkzbs.com/hotel:1563525187197.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			box-shadow: 0 11rpx 18rpx 0 rgba(53, 149, 249, 0.49);
			border-radius: 10rpx;
			font-size: 28rpx;

			.box_title {
				margin: 0 auto;
				width: 266rpx;
				height: 108rpx;
				line-height: 108rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.left{
					width: 30rpx;
					height: 30rpx;
					transform: rotate(90deg);
				}
				.right{
					width: 30rpx;
					height: 30rpx;
					transform: rotate(-90deg);
				}
			}

			.text {
				color: #bcdcfd;
			}

			.num {
				line-height: 112rpx;
				font-size: 72rpx;
			}

			.items {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.item {
					color: #bedaf8;
					line-height: 54rpx;
				}
			}
		}

		.box2 {
			padding: 0 24rpx 50rpx 24rpx;

			.title {
				line-height: 1;
				font-size: 32rpx;
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.icon {
						width: 8rpx;
						height: 32rpx;
						background-color: #3595f9;
						border-radius: 2rpx;
						margin-right: 10rpx;
					}
				}

				.right {
					font-size: 20rpx;
					display: flex;
					align-items: center;
				}
			}

			.item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				line-height: 1;

				.left {
					display: flex;
					align-items: center;

					.name {
						font-size: 32rpx;
						width: 3em;
						margin-right: 20rpx;
						white-space: nowrap;
						overflow: hidden;
					}

					.main {
						position: relative;

						.img {
							width: 70rpx;
							height: 70rpx;
							background-color: #3595f9;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 62rpx;
								height: 62rpx;
								border-radius: 50%;
							}
						}

						.schedule {
							position: absolute;
							z-index: -9;
							top: 15rpx;
							left: 0;
							width: 0rpx;
							height: 40rpx;
							background-color: #aad2fb;
							border-radius: 20rpx;
						}

						._schedule {
							position: absolute;
							top: 15rpx;
							left: 0;
							z-index: -7;
							width: 0rpx;
							height: 40rpx;
							background-color: #3595f9;
							border-radius: 20rpx;
						}
					}
				}


				.order {
					text-align: right;
					display: flex;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}
		.pop{
			position: fixed;
			top: 0;
			left: 0;
			filter:alpha(Opacity=60);
			opacity: 0.6 ;
			background-color: rgba(0,0,0,1);
			height: 100vh;
			width: 100vw;
			z-index: 10001;
		}
	}
</style>
